<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="jquery-3.4.1.min.js"></script>
    <script src="echarts.js"></script>
    <title>Document</title>
</head>
<body style="margin: 0; padding: 0;">
    <div id="echarts" style="width: 100%; height: 160px; background-color: #F1F4FD;"></div>
    <script>
        function getData(maxData, minData) {
            var maxTem = new Array;
            var minTem = new Array;
            
            try{
                tmpstr = JSON.stringify(maxData);
                substr = tmpstr.substring(2, tmpstr.length-2);
                maxTem = substr.split(',');
            }catch(exception) {
                alert(exception);
            }
            try{
                tmpstr = JSON.stringify(minData);
                substr = tmpstr.substring(2, tmpstr.length-2);
                minTem = substr.split(',');
            }catch(exception) {
                alert(exception);
            }

            var dom = document.getElementById("echarts");
            var myChart = echarts.init(dom);
            option = {
                tooltip: {
                    trigger: 'axis'
                },
                grid: {
                    top: '3%',
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                backgroundColor: '#F1F4FD',
                xAxis: {
                    type: 'category',
                    show: false,
                    data: ['昨天', '今天', '明天', '周五', '周六', '周日']
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        show: false
                    },
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                },
                series: [
                    {
                        name: '最高温度',
                        type: 'line',
                        data: maxTem,
                        itemStyle: {
                            normal: {
                                label:{
                                    show:true,
                                },
                                lineStyle: {
                                    color: '#ff0000'
                                }
                            }  
                        }
                    },
                    {
                        name: '最低温度',
                        type: 'line',
                        data: minTem,
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true
                                },
                                lineStyle: {
                                    color: '#3F50B5'
                                }
                            }
                        }
                    }
                ]
            };
            myChart.setOption(option, true);
        }
    </script>
</body>
</html>